<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <link th:href="@{/css/update.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('级联下拉选择')" />
    <th:block th:include="include :: select2-css" />

    <style type="text/css">
        .js-example-basic-single{
            min-width: 180px;
        }
        .select2-container .select2-selection--single{
            height:34px;
            border: 1px solid #ccc;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
            color: #555;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:34px;}
        .select2-container--default .select2-selection--single .select2-selection__arrow{height:32px;}
    </style>
</head>
<body class="gray-bg">
<div>
    <label class="col-md-2 control-label">机构地址：</label>
    <div style="display: inline-block;width: 28%;">
        <select class="select2 select2-one" name="one" data-level="1" onchange="change(this, 1)">
            <option value="">请选择一级</option>
            <option th:each="dict: ${oneLevelData}" th:text="${dict.text}" th:value="${dict.id}" data-level="1"></option>
        </select>
    </div>
    <div style="display: inline-block;width: 28%;">
        <select class="select2 select2-two" name="two" data-level="2" onchange="change(this, 2)">
        </select>
    </div>
    <div style="display: inline-block;width: 28%;">
        <select class="select2-three" name="three">
        </select>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
    $(function(){
        /* 三级联动 */
        $(".select2-one").select2({
            placeholder:"请选择一级",
            language: "zh-CN"
        });
        $(".select2-two").select2({
            placeholder:"请选择二级",
            language: "zh-CN"
        });
        $(".select2-three").select2({
            placeholder:"请选择三级",
            language: "zh-CN"
        });
    });

    //change事件
    function change(obj, level){
        var id = $(obj).find('option:selected').attr("value");
        if(level==1){
            getLevelList(2, id,".select2-two","请选择二级");
            /* 解决追加问题 */
            $(".select2-three").html('<option selected="selected"></option>');
            $(".select2-three").select2({
                placeholder: "请选择三级",
                language: "zh-CN"
            });
        }else if(level==2){
            getLevelList(3, id,".select2-three","请选择三级");
        }
    }

    /* 根据所选，获取下一级的列表 */
    function getLevelList(data_level, parentId, clazz, tips){
        $.ajax({
            url : '/netintech/test/distinctList',
            type : "get",
            data : {"parentId": parentId},
            dataType: 'json',
            success : function(result) {
                /* 解决追加问题 */
                $(clazz).html('<option selected="selected"></option>');
                /* 生成新数据 */
                $(clazz).select2({
                    placeholder: tips,
                    language: "zh-CN",
                    data: result
                });
            }
        });
    }
</script>
</body>
</html>